<template>
    <div class="multiple-units-home-right">
        <!-- 切换 -->
        <div v-show="pageShowType==2 && showPageChangeBtn" class="change-page-btn" @click="changePage"></div>
        <div class="one-card" v-if="(pageShowType==2 && currentPage == 1) || pageShowType==1 || pageShowType==0" :style="{'justify-content': (showPageChangeBtn ? 'space-around' : 'center'), 'width': ( pageShowType==1 ? '50%' : '100%')}">
            <div v-for="(item, i) in card1List" :key="i" :is="item.id" class="card-item" @configChange="changeCard1" :style="{height:item.height}">
            </div>
        </div>
        <div class="two-card" v-if="(pageShowType==2 && currentPage == 2) || pageShowType==1" :style="{'width': ( pageShowType==1 ? '50%' : '100%')}">
            <div v-for="(item, i) in card2List" :key="i" :is="item.id" class="card-item" :style="{height:item.height}">
            </div>
        </div>
    </div>
</template>
<script>
import CardCellCenter from '@/components/Cards/CardCellCenter' // 呼叫中心
import CardPickUpPolice from '@/components/Cards/CardPickUpPolice' // 接处警
import CardDailyInspection from '@/components/Cards/CardDailyInspection' // 日常巡检
import CardHiddenDangerRectification from '@/components/Cards/CardHiddenDangerRectification' // 隐患整改
import CardFireWaterSupply from '@/components/Cards/CardFireWaterSupply' // 消防供水
import CardElectricalFire from '@/components/Cards/CardElectricalFire' // 电气火灾
import CardFireMaintenance from '@/components/Cards/CardFireMaintenance' // 消防维保
import CardInOrOutdoorFireHydrants from '@/components/Cards/CardInOrOutdoorFireHydrants' // 室内外消火栓
import CardFireOfficialWebsite from '@/components/Cards/CardFireOfficialWebsite' // 喷淋管网
import CardAICloudVideo from '@/components/Cards/CardAICloudVideo' // AI云视

export default {
    name: 'MultipleUnitsHomeRight',
    components: {
        CardCellCenter,
        CardPickUpPolice,
        CardDailyInspection,
        CardHiddenDangerRectification,
        CardFireWaterSupply,
        CardElectricalFire,
        CardFireMaintenance,
        CardInOrOutdoorFireHydrants,
        CardFireOfficialWebsite,
        CardAICloudVideo
    },
    data() {
        return {
            pageShowType: localStorage.getItem('ilinkBs_carouselFlag'), //2 轮播  1 平铺 0 只有一页
            showPageChangeBtn: true,
            currentPage: 1, // 当前显示页码
            card1List: this.bsConfig.RightMenu.cards1,
            card2List: this.bsConfig.RightMenu.cards2,
        }
    },
    methods: {
        // 切换页面
        changePage() {
            if(!this.$Ctl.getClickEnabel(1)) return
            this.currentPage = this.currentPage == 1 ? 2 : 1;
        },
        /* 
        * 卡片组1配置变化
        * 【参数说明】
        *  config：新的卡片组配置数据
        *  showPageChangeBtn： 是否需要显示分页按钮
        */
        changeCard1(config, isShowPageChangeBtn) {
            this.showPageChangeBtn = isShowPageChangeBtn
            this.card1List = config
        }
    }
}
</script>
<style lang="scss">
.multiple-units-home-right {
    display: flex;
    width: 100%;
    .change-page-btn {
        position: absolute;
        top: 1%;
        left: 86%;
        width: 50px;
        height: 50px;
        background: url(../../../assets/images/cards/change-btn.png) center center no-repeat;
        cursor: pointer;
        z-index: 999;
    }
    .one-card,
    .two-card {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding: 0 3%;
        width: 100%;
        height: 100%;
        .card-item {
            // border: 1px solid red;
            box-sizing: border-box;
            overflow: hidden;
        }
    }
}
</style>
